<!--
 * @Date: 2024-10-11 15:01:51
 * @LastEditors: Lcx l1556461835@163.com
 * @LastEditTime: 2024-10-30 10:17:39
 * @FilePath: \frontEnd\components\PageTitle.vue
 * @Description: 局部样式
-->
<template>
  <div class="flex uPageTitle justify-between">
    <div>
      <i class="el-icon-arrow-right uPageTitle-icon"></i>
      <span>{{title}}</span>
    </div>
    <div class="flex pageTitle-right">
      <div @click="handleBackHome"><i class="el-icon-s-home uPageTitle-icon"></i><span>首页</span></div>
      <div style="margin-left: 4px" @click="handleBack"><i class="el-icon-back uPageTitle-icon"></i><span>返回</span></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "首页"
    },
    homePath: {
      type: String,
      default: "/"
    },
    backPath: {
      type: String,
      default: ""
    }
  },
  methods: {
    handleBackHome() {
      this.$router.push(this.homePath);
    },
    handleBack() {
      if (this.backPath.length > 0) {
        this.$router.replace({ path: this.backPath });
      } else {
        this.$router.go(-1);
      }
    }
  }
};
</script>

<style lang="scss">
.uPageTitle {
  color: white;
  font-size: 22px;
  font-weight: 500;
  line-height: 24px;
  padding-bottom: 10px;
  padding-right: 10px;
  .uPageTitle-icon {
    font-size: 20px;
  }
  .pageTitle-right {
    cursor: pointer;
    div {
      &:hover {
        color: #3391ff;
      }
    }
  }
}
</style>
